<template>
	<view>
		<u-navbar :title="title"></u-navbar>
		<view class="">
			<!-- {{ items }} -->
			<view class="item u-flex" v-for="(item, key) in items" :key="key">
				<view class="l">
					<view class="up">{{item.tdztxs}}</view>
					<view class="down">{{ item.tda }}{{$z.$t("枪")}}</view>
				</view>
				<view class="c">
					<view class="u-flex u-line-1">
						<text style="color: #999; margin-right: 20rpx">{{$z.$t("设备ID")}}</text>
						<text style="color: #2093f5">{{ item.gtel }}</text>
					</view>
					<view class="u-flex u-line-1">
						<text style="color: #999; margin-right: 20rpx">{{$z.xtypefn(item.xtype)}}</text>
						<text style="color: #2093f5">{{$z.defaultValue.getoption(item.df2,"df2")}}</text>
					</view>
					<view class="u-flex u-line-1">
						<text style="color: #999; margin-right: 20rpx">{{$z.$t("电压")}}</text>
						<text style="color: #2093f5">{{$z.defaultValue.getoption(item.df1,"df1")}}</text>
					</view>
					<!-- <view>{{ xtypexs  }}电</view> -->
				</view>
				<view class="r">
					<!-- 4轮地锁设备 -->
					<view v-if='item.type == 14'>
						<view style="margin-top: 10rpx;">
							<!-- v-if="item.isOccupied == 0" -->
							<u-button type="primary" style="margin-top: 10rpx;" @click="toOpenChargePage(item)"
								v-if="item.isOccupied == 0 "
								shape="circle">{{item.tdztxs == '空闲' ? '启动充电' : (item.tdztxs == '充电中' ? '充电中' : '故障')}}</u-button>
							<u-button type="primary" style="margin-top: 10rpx;" v-if="item.isOccupied == 0"
								@click="handleOpen(item,0)" text="上升地锁" shape="circle"></u-button>
							<u-button type="primary" text="下降地锁" shape="circle" :disabled="isParkingLockOrder"
								v-if="item.isOccupied == 1" @click="handleOpen(item,1)"></u-button>
							<u-button type="error" style="margin-top: 10rpx;" v-if="item.isOccupied == 2"
								@click="handleOpen(item,2)" text="已被占用" shape="circle"></u-button>
						</view>
					</view>
					<view v-else @click="itemtap(item)">
						<u-button type="primary" v-if="item.tdzt=='0'" text="启动充电" shape="circle"></u-button>
						<u-button type="info" :plain="true" v-if="item.tdzt=='1'" text="充电中" shape="circle"></u-button>
						<u-button type="error" :plain="true" v-if="item.tdzt=='2'" text="启动充电"
							shape="circle"></u-button>
					</view>
				</view>
			</view>
		</view>
		<u-modal title="" :show="show" :mask-close-able="true" :show-title="false">
			<!-- <u-modal :show="show" :title="title" :content='content'> -->
			<view class="">
				<view class="title u-flex u-row-center z-type-cdz">
					{{ $z.$t("充电须知") }}
				</view>
				<view class="item1">
					{{
		    $z.$t(
		      "1、此车位为新能源汽车充电车位，在车辆充电期间将不收取占位费，只收取充电费用。"
				)
			}}
				</view>
				<view class="item1">
					2、{{ $z.$t("请将车辆停到车位锁上方。") }}
				</view>
				<view class="item1">
					3、{{tipThree}}
				</view>
				<view class="item1">
					4、{{ $z.$t("为车辆充电时需要先插好充电枪再点击充电按钮。") }}
				</view>
				<view class="item1">
					5、{{ tipFive }}
				</view>
				<view class="item1">
					6、{{ tipSix}}
				</view>
				<view class="item1">
					7、{{
		    $z.$t(
		      "充电结束您将收到公众号充电结束提醒，请及时挪车，避免额外支付占位费。"
		    )
		  }}
				</view>
				<view class="item1">
					8、{{ $z.$t("同一个用户同一时间段之内只能启动一笔地锁订单。")}}
				</view>
				<view class="item1">
					{{
		    $z.$t(
		      "温馨提示:若不充电或已完成充电，请手机上操作车位锁完全上升后离开，否则其它车辆进入后将会扣取您的占位费。"
		    )
		  }}
				</view>
			</view>
			<template #confirmButton>
				<view style="padding: 0 20rpx">
					<u-button type="primary" @click="handleClose()">
						{{ $z.$t("我已知晓") }}
					</u-button>
				</view>
			</template>
		</u-modal>
		<zmodal ref="zmodal"></zmodal>
	</view>
</template>

<script>
	import qs from "qs";
	export default {
		data() {
			return {
				query: {},
				list: [],
				title: "",
				xtypexs: "",
				items: [],
				show: false,
				isParkingLockOrder: false, //是否有地锁订单
				parkingLockOrderData: {},
				isUnpaidOrder: false, //是否有未支付的订单
				unfinishedOrder: {},
				isEndChargeOrder: false, //是否有未结束的充电订单
				ChargeCarSys: {},
				obj: {}
			};
		},
		async onLoad(query) {
			this.query = query;
			await this.seachParkingLockOrder()
			// 查询用户是否有充电中的订单
			await this.searchUser()

			if (this.isUnpaidOrder) {
				// 查询用户是否有已经结束的充电订单 但地锁订单未支付
				this.handleUnpaidOrderTips()
			} else if (this.isParkingLockOrder && !this.isEndChargeOrder) {
				// 查询用户是否有未结束的占位订单
				this.handleShowTips()
			}
			// this.init();

		},
		onShow() {
			this.init();
		},
		computed: {

		},
		asyncComputed: {
			tipThree() {
				let res = this.$z.$t("请在停入后的{1}分钟之内启动充电，否则将直接开始占位费计算。")
				res = res.replace(/\{1\}/g, 10);
				return res;
			},
			tipFive() {
				let res = this.$z.$t("免费停放时间=车辆充电时长+{1}分钟，超过{2}分钟则需支付占位费{3}元/{4}分钟。")
				res = res.replace(/\{1\}/g, this.ChargeCarSys.jebd);
				res = res.replace(/\{2\}/g, this.ChargeCarSys.jebd);
				res = res.replace(/\{3\}/g, this.ChargeCarSys.qbf / 100);
				res = res.replace(/\{4\}/g, this.ChargeCarSys.dfsj);
				return res;
			},
			tipSix() {
				let res = this.$z.$t("地锁在无遮挡物的情况下{1}秒后自动升起，也可以在无遮挡物的情况下手动点击相应按钮可立刻升起。")
				res = res.replace(/\{1\}/g, '120');
				return res;
			},
		},
		methods: {
			// 去充电
			toOpenChargePage(val) {
				// console.log('val', val);
				// return
				uni.navigateTo({
					url: `/pages/ChargeCarSys/ChargeCarSys?gtel=${val.gtel}_${val.tdh}&openChargeType=1`,
				});
			},
			//查询地锁订单
			async seachParkingLockOrder() {
				if (!this.$store.state.user.USearch.uUser) {
					await this.$store.dispatch("user/getuser");
				}
				let USearch = this.$store.state.user.USearch;
				// USearch.uUser = 'liliang'
				let ChargeUserDs = await this.$z.request("/ChargeUserDs", {
					uUser: USearch.uUser,
				});
				this.isParkingLockOrder = ChargeUserDs.some(item => item.b_end == 0);
				this.parkingLockOrderData = ChargeUserDs.find(item => item.b_end == 0);
				this.unfinishedOrder = ChargeUserDs.find(item => item.b_zf == 0);
				this.isUnpaidOrder = ChargeUserDs.find(item => item.b_zf == 0 && item.b_end == 1)
			},

			// 查询用户是否有充电中的订单
			async searchUser() {
				if (!this.$store.state.user.USearch.uUser) {
					await this.$store.dispatch("user/getuser");
				}
				let USearch = this.$store.state.user.USearch;
				let ChargeUser = await this.$z.request("/ChargeUser", {
					uUser: USearch.uUser,
				});
				this.isEndChargeOrder = ChargeUser.some(item => item.b_end == 0)

			},
			// 查询设备是否急停
			async searchDeviceStop(val) {
				let ChargeCarSys = await this.$z.request("/ChargeCarSys", {
					gtel: val.gtel,
				});
				this.ChargeCarSys = ChargeCarSys[0]

			},
			// 未缴费的弹窗
			handleUnpaidOrderTips() {
				this.$refs.zmodal.init({
					content: this.$z.$t("系统检测到您当前存在未缴纳的占位订单，请支付后再使用。"),
					showcancel: false,
					showconfirm: true,
					title: this.$z.$t("温馨提示"),
					confirmText: this.$z.$t("打开占位订单"),
					confirm: () => {
						uni.reLaunch({
							url: `/pages/order/components/components/placeholderOrderInfo?ddh=${this.unfinishedOrder.ddh}`
						})
					},
					cancel: () => {}
				});
			},
			// 有占位订单弹窗
			handleShowTips() {
				this.$refs.zmodal.init({
					content: this.$z.$t("尊敬的用户，系统检测到您当前有占位订单。"),
					title: this.$z.$t("温馨提示"),
					showcancel: true,
					confirmText: this.$z.$t("去充电"),
					cancelText: this.$z.$t("取消"),
					confirm: () => {
						uni.navigateTo({
							url: `/pages/ChargeCarSys/ChargeCarSys?gtel=${this.parkingLockOrderData.gtel}_${this.parkingLockOrderData.td}&openChargeType=1`,
						});
					},
					cancel: () => {}
				});
			},
			async handleOpen(val, type) {
				console.log('val', val, this.parkingLockOrderData);

				// 查询设备是否急停
				// await this.searchDeviceStop(val)
				// if (this.ChargeCar.gcdl3 == 2) {
				// 	this.$refs.zmodal.init({
				// 		title: '提示',
				// 		content: `急停已被按下，请顺时针旋转急停按钮恢复使用`,
				// 		confirm() {
				// 			uni.reLaunch({
				// 				url: "/pages/home1/home1"
				// 			})
				// 		}
				// 	})
				// } 
				if (!this.$store.state.user.USearch.uUser) {
					await this.$store.dispatch("user/getuser");
				}
				let USearch = this.$store.state.user.USearch;
				// USearch.uUser == 'liliang'
				// console.log('USearch.uUser', USearch.uUser, this.parkingLockOrderData.uUser);
				if (val.tdztxs == '故障') {
					this.$u.toast(this.$z.$t("该通道故障，请选择其他充电桩"));
				} else if (type == 2) {
					this.$u.toast(this.$z.$t("该通道被占用，请选择其他充电桩"));
				} else if (this.parkingLockOrderData && this.parkingLockOrderData.uUser && this.parkingLockOrderData
					.uUser != USearch.uUser) {
					this.$refs.zmodal.init({
						content: this.$z.$t("系统检测到您降地锁和升地锁不是同一人，无法执行升地锁操作"),
						showcancel: false,
						showconfirm: true,
						title: this.$z.$t("温馨提示"),
						confirmText: this.$z.$t("我已知晓"),
						confirm: () => {},
						cancel: () => {}
					});
				} else if (type == 1) {
					await this.searchDeviceStop(val)
					this.show = true
					this.obj = val
					console.log('this.obj', this.obj);
					return

				} else if (type == 0) {
					// 上升地锁
					this.handleDrop(val)
				}
			},
			handleDrop(val) {
				this.$refs.zmodal.init({
					content: this.$z.$t("请确保您的车已离开车位且地锁上无遮挡物。"),
					title: this.$z.$t("温馨提示"),
					confirmText: this.$z.$t("确认"),
					cancelText: this.$z.$t("取消"),
					confirm: async () => {
						let ChargeDS = await this.$z.request("/ChargeDS", {
							gtel: val.gtel
						});
						let dqChargeDS = ChargeDS.find(e => {
							return e.td == val.tdh;
						});
						if (dqChargeDS) {
							await this.$z.request("/ChargeSetYKCadd", {
								gtel: dqChargeDS.gtelds,
								lx: 8,
								td: dqChargeDS.tdds,
								df: 0
							});
							this.$u.toast("升起地锁成功");
							await this.seachParkingLockOrder()
						} else {
							this.$u.toast("升起地锁失败");
						}
					},
					cancel: () => {}
				});
			},
			handleClose() {
				this.show = false
				// 降地锁
				this.openParkingLock(this.obj)

			},
			async openParkingLock(val) {
				const RoadOpen = await uni.$z.request("/RoadOpen", {
					gtel: val.gtel,
					td: val.tdh
				});
				if (RoadOpen[0].par == 'succeed') {
					this.zfokfn(val);
					// 更新占用通道列表
					// this.occupiedChannels.push(this.selectedTd);
				}
			},
			zfokfn(val) {
				let page = "";
				const zftext = '打开地锁'
				const reqdata = {
					gtel: val.gtel,
					td: val.tdh,
					btntext: '打开地锁',
					paramsUrl: '/ChargeAskDs',
					noChargePage: true,
					id: this.query.id,
					type: this.query.type
				}
				page = `/pages/ChargeAsk/ChargeAsk?${qs.stringify(reqdata)}`;
				uni.redirectTo({
					url: page,
				});
			},
			async getData() {
				let r = [];
				let array = this.list;
				let abc = [
					"A",
					"B",
					"C",
					"D",
					"E",
					"F",
					"G",
					"H",
					"I",
					"J",
					"K",
					"L",
					"M",
				];
				for (let index = 0; index < array.length; index++) {
					const element = array[index];
					let ChargeCarSys = await this.$store.dispatch("request/getRequest", {
						url: "/ChargeCarSys",
						data: {
							gtel: element.gtel,
						},
					});

					let gtel = await this.$store.dispatch("request/getRequest", {
						url: "/gtel",
						data: {
							gtel: element.gtel,
						},
					});
					ChargeCarSys = {
						xtype: gtel[0].xtype,
						...ChargeCarSys[0],
					};
					if (!this.$store.state.user.USearch.uUser) {
						await this.$store.dispatch("user/getuser");
					}
					let USearch = this.$store.state.user.USearch;
					// USearch.uUser = 'liliang'
					for (let index = 1; index <= ChargeCarSys.gls; index++) {
						// let tdzt = ChargeCarSys[`gcdl${Number(index) }`];
						// if (ChargeCarSys[`glzt${index}`] != "0" || !tdzt) {
						// 	tdzt = ChargeCarSys["glzt" + index];
						// }

						const ChargeUserDs = await this.$z.request("/ChargeUserDs", {
							gtel: ChargeCarSys.gtel,
							td: index,
						});
						let data = ChargeUserDs.find(item => item.b_end == 0);
						const isOccupied = ChargeUserDs.some(item => item.b_end == 0);
						let tdzt = ChargeCarSys["glzt" + index];
						if (!tdzt && tdzt != 0) {
							tdzt = "2";
						}
						if (tdzt != 0 && tdzt != 2) {
							tdzt = "1";
						}
						if (ChargeCarSys.gzt != 1) {
							tdzt = "2";
						}
						let setles = [{
								value: "0",
								text: this.$z.$t("空闲"),
								taptext: "",
								colorstr: "#2093f5",
							},
							{
								value: "1",
								text: this.$z.$t("充电中"),
								taptext: this.$z.$t("此枪充电中"),
								colorstr: "#dd524d",
							},
							{
								value: "2",
								text: this.$z.$t("故障"),
								taptext: this.$z.$t("插座故障"),
								colorstr: "#cccccc",
							},
						];
						setles.forEach(e => {
							e.text = this.$z.$t(e.text);
							e.taptext = this.$z.$t(e.taptext)
						})
						console.log(tdzt, "tdzt");

						// if (tdzt == "0") {
						if (data && data.uUser == USearch.uUser) {
							r.push({
								tdztxs: setles[tdzt].text,
								tdzt,
								...ChargeCarSys,
								tdh: index,
								tda: abc[index - 1],
								isOccupied: isOccupied ? 0 : 1
							});
						} else {
							r.push({
								tdztxs: setles[tdzt].text,
								tdzt,
								...ChargeCarSys,
								tdh: index,
								tda: abc[index - 1],
								isOccupied: data && data.b_end == 0 ? 2 : 1,
							});
						}


						// }
					}
				}
				this.items = r
				console.log(this.items, '------------');
			},
			async init() {

				this.$store.commit("request/removesetrequestfalgs")
				this.title =
					this.query.type == "carzlsum" ? this.$z.$t("直流充电桩") : this.$z.$t("交流充电桩");
				this.xtypexs = this.query.type == "carzlsum" ? this.$z.$t("直流") : this.$z.$t("交流");
				if (this.query.type == 'ChargeOften') {
					this.title = this.$z.$t("常用充电桩");
					let ChargeOften = await this.$z.request("/ChargeOften")
					// let ChargeCar = []
					// for (let i = 0; i < ChargeOften.length; i++) {
					// 	let ChargeCaritem = await this.$z.request("/ChargeCar", {
					// 		gtel: ChargeOften[i].gtel
					// 	})
					// 	ChargeCar = ChargeCar.concat(ChargeCaritem)
					// }
					this.list = ChargeOften;
					return
				}
				let ChargeCar = await this.$z.request("/ChargeCarSearchDetailed", {
					pcs1: this.query.id,
				});
				ChargeCar = ChargeCar.filter((e) => {
					if (this.query.type == "carzlsum") {
						return e.xtype == 8;
					} else if (this.query.type == "carjlsum") {
						return e.xtype != 8;
					}
				});
				this.list = ChargeCar;
				await this.getData()
			},
			itemtap(item) {
				if (item.tdzt != 0) {
					return
				}
				uni.navigateTo({
					url: `/pages/ChargeCarSys/ChargeCarSys?gtel=${item.gtel}_${item.tdh}`
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.title {
		display: flex;
		justify-content: center;
		font-size: 28rpx;
		padding: 40rpx 20rpx;
		padding-right: 40rpx;
		padding-top: 0;
	}

	.item1 {
		padding: 0 0rpx 20rpx 0rpx;
		font-size: 24rpx;
		color: $uni-text-color-grey;
		line-height: 1.4;
	}

	.yeitem {
		color: $uni-color-error;
		text-align: center;
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// padding: 20upx;
		height: 220rpx;
		// border-bottom: 1upx solid #eee;
		position: relative;

		&::after {
			content: "";
			position: absolute;
			width: 100%;
			height: 2rpx;
			background: #eee;
			bottom: 0;
			left: 46rpx;
		}

		.l {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			width: 124rpx;
			height: 124rpx;
			border: 10rpx solid #eaf1fb;
			border-radius: 50%;
			position: relative;
			margin-left: 40rpx;
			margin-right: 40rpx;
			padding: 16rpx 0;

			.up {
				font-size: 16rpx;
				color: #4c9bdf;
			}

			.down {
				font-size: 24rpx;
				color: #0068c1;
			}
		}

		.c {
			width: 0;
			flex: 1;
			font-size: 28rpx;
			line-height: 60rpx;
		}

		.r {
			padding-right: 40rpx;
			padding-left: 20rpx;
		}
	}
</style>